<template>
  <view class="container">
    <block v-if="attentionList.length != 0">
      <view class="container_box" v-for="(item,i) in attentionList" :key="i">
        <view class="container_box_left" @click="navTo('/subpkg/userInfo/userInfo?id=' + item.id)">
          <view class="container_box_left_img">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="container_box_left_title">
            <h1>{{item.name}}</h1>
            <text>{{item.followeds}}粉丝 · {{item.followers}}关注</text>
          </view>
        </view>
        <view class="container_box_right">
          <view class="attention">
            已关注
          </view>
        </view>
      </view>
    </block>
    <block v-else>
      <view class="no_Pet_record">
        <image src="/static/images/mine/nopey.png" mode="widthFix"></image>
        <view class="no_Pet_record_text">
          你还没有关注别人哦 ~
        </view>
      </view>
    </block>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'
  import {
    getattentionList,
    getattention
  } from '@/api/community.js'
  export default {
    data() {
      return {
        attentionList: []
      };
    },
    components: {

    },
    onShow() {
      getattentionList().then(res => {
        // console.log(res)
        this.attentionList = res.data
      })
    },
    computed: {
      ...mapGetters('m_community', ['myattentionList'])
    },
    methods: {
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 36rpx 24rpx 0;

    .container_box {
      padding: 46rpx 0;
      border-bottom: 1rpx solid #ededed;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .container_box_left {
        display: flex;

        .container_box_left_img {
          width: 74rpx;
          height: 74rpx;
          border-radius: 50%;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .container_box_left_title {
          margin-left: 18rpx;

          h1 {
            color: rgba(61, 61, 61, 1);
            font-size: 30rpx;
          }

          text {
            color: rgba(61, 61, 61, 0.5);
            font-size: 24rpx;
          }
        }
      }

      .container_box_right {

        // 关注
        .attention {
          padding: 2rpx 25rpx;
          background-color: rgba(253, 211, 56, 0.5);
          border-radius: 26.5rpx;
          color: rgba(51, 51, 51, 0.5);
          font-size: 26rpx;
          text-align: center;
          line-height: 52rpx;
        }

        // 未关注
        .attention1 {
          padding: 2rpx 25rpx;
          background-color: rgba(253, 211, 56, 1);
          border-radius: 26.5rpx;
          color: rgba(51, 51, 51, 1);
          font-size: 26rpx;
          text-align: center;
          line-height: 52rpx;
        }
      }
    }
  }

  .no_Pet_record {
    display: flex;
    height: 1050rpx;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    image {
      width: 120rpx;
      height: 181rpx;
    }

    .minImage {
      width: 262rpx;
      height: 258rpx;
    }

    .no_Pet_record_text {
      width: 360rpx;
      height: 112rpx;
      font-size: 30rpx;
      text-align: center;
      color: rgba(197, 197, 197, 0.9);
      line-height: 60rpx;
      margin-top: 20rpx;
    }
  }
</style>
